<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
    <el-table
      :data="ruleForm.tableData"
      style="width: 100%"
      :header-cell-class-name="mustCls"
      :header-cell-style="{
        background: '#fafafa',
        color: '#333',
        borderBottom: '1px solid #f0f0f0',
      }"
    >
      <el-table-column v-if="selection" type="selection" width="55" :align="align"></el-table-column>
      <!-- 文本数据渲染 -->
      <template v-for="(item, index) in tableHead || tableCol || []">
        <el-table-column
          v-if="slotType.includes(item.columnType) || slotType.includes(item.type)"
          :prop="item.field || item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :column-key="item.columnKey"
          :render-header="item.renderHeader"
          :sort-method="item.sortMethod"
          :sort-by="item.sortBy"
          :sort-orders="item.sortOrders"
          :header-align="item.headerAlign"
          :class-name="item.className"
          :label-class-name="item.labelClassName"
          :selectable="item.selectable"
          :reserve-selection="item.reserveSelection"
          :filters="item.filters"
          :filter-placement="item.filterPlacement"
          :filter-method="item.filterMethod"
          :ffilter-multiple="item.filterMultiple"
          :filtered-value="item.filteredValue"
          :key="item.field"
          :width="item.width"
          :align="item.align || align"
          :sortable="item.sortable"
          :resizable="item.resizable"
          :formatter="item.formatter"
          :show-overflow-tooltip="item.showOverflowTooltip"
        >
          <template v-slot="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.' + (item.prop || item.field || item.slotName)"
              :rules="rules[item.prop || item.field || item.slotName]"
            >
              <el-input
                v-if="item.type === 'text'"
                :show-word-limit="item.showWrodLimit"
                :type="item.type"
                :maxlength="item.maxlength"
                :minlength="item.minlength"
                :clearable="item.clearable || true"
                :show-password="item.showPassword"
                :prefix-icon="item.prefixicon"
                :suffix-icon="item.suffixIcon"
                :rows="item.rows"
                :autosize="item.autosize"
                :autocomplete="item.autocomplete"
                :name="item.name"
                :max="item.max"
                :min="item.min"
                :step="item.step"
                :resize="item.resize"
                :autofocus="item.autofocus"
                :form="item.form"
                :tabindex="item.tabindex"
                :validate-event="item.validateEvent"
                :disabled="item.disabled || disabledProp[item.prop] || false"
                :placeholder="item.placeholder || `请输入${item.label}`"
                v-model="scope.row[item.prop || item.field || item.slotName]"
                @focus="item.focus && item.focus()"
                @blur="item.blur && item.blur()"
                @clear="item.clear && item.clear()"
                @change="item.change && item.change()"
                @input="item.input && item.input()"
              ></el-input>
              <el-select
                v-else-if="item.type === 'select' || item.type === 'option'"
                v-model="scope.row[item.prop || item.field || item.slotName]"
                default-first-option
                :clearable="item.clearable || true"
                :disabled="item.disabled || disabledProp[item.prop || item.field || item.slotName] || false"
                :remote="item.remote"
                :allow-create="item.allowCreate"
                :multiple="item.multiple"
                :filterable="item.filterable"
                @visible-change="item.visibleChange && item.visibleChange()"
                @remove-tag="item.removeTag && item.removeTag()"
                @clear="item.clear && item.clear()"
                @blur="item.blur && item.blur()"
                @focus="item.focus && item.focus()"
                @change="item.change && item.change()"
                :remote-method="
                  item.remoteMethod ||
                    ((query) => {
                      remoteMethod(query, item.prop);
                    })
                "
                :placeholder="item.placeholder || `请选择${item.label}`"
              >
                <el-option
                  v-for="(oItem, okey) in item.option || item.options || item.optionData || optionData[item.prop] || []"
                  :key="okey"
                  :label="(item.optionProps && oItem[item.optionProps.label]) || oItem.label"
                  :value="(item.optionProps && oItem[item.optionProps.value]) || oItem.value"
                >
                </el-option>
              </el-select>
              <slot v-else :name="item.slotName || item.field || item.prop" :data="scope" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          :width="item.width"
          :label="item.label"
          :fixed="item.fixed || 'right'"
          :align="item.align || align"
          v-else-if="item.type === 'operation' || item.prop === 'operation'"
          :key="index"
        >
          <template v-slot="scope">
            <el-button
              v-for="(child, cIndex) in item.children"
              :icon="child.icon"
              :type="child.type || 'text'"
              :key="cIndex"
              :disabled="
                child.disabled || item.disabled || (item.disabledIndex && item.disabledIndex.includes(scope.$index))
              "
              :circle="child.circle || item.circle"
              :round="child.round || item.round"
              :plain="child.plain || item.plain"
              @click="child.click && child.click(scope)"
              >{{ child.title || child.label }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :prop="item.field || item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :column-key="item.columnKey"
          :render-header="item.renderHeader"
          :sort-method="item.sortMethod"
          :sort-by="item.sortBy"
          :sort-orders="item.sortOrders"
          :header-align="item.headerAlign"
          :class-name="item.className"
          :label-class-name="item.labelClassName"
          :selectable="item.selectable"
          :reserve-selection="item.reserveSelection"
          :filters="item.filters"
          :filter-placement="item.filterPlacement"
          :filter-method="item.filterMethod"
          :ffilter-multiple="item.filterMultiple"
          :filtered-value="item.filteredValue"
          :key="item.field"
          :width="item.width"
          :align="item.align || align"
          :sortable="item.sortable"
          :resizable="item.resizable"
          :formatter="item.formatter"
          :show-overflow-tooltip="item.showOverflowTooltip"
        ></el-table-column>
      </template>
    </el-table>
  </el-form>
</template>

<script>
import DonMessage from "common/js/message";
import { validationFailText } from "common/js/config";

export default {
  name: "validateTabel",
  props: {
    selection: {
      type: Boolean,
      default: false,
    },
    ruleForm: Object,
    rules: Object,
    tableHead: Array,
    tableCol: Array,
    must: Array,
  },
  components: {},
  data() {
    return {
      slotType: ["slot", "select", "option", "text"],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    mustCls({ columnIndex }) {
      if (this.must.includes(columnIndex)) {
        return "must";
      }
    },
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$emit("submitForm");
        } else {
          new DonMessage().error({
            message: validationFailText,
          });
        }
      });
    },
    reset() {
      this.$refs["ruleForm"].resetFields();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
